<template>
  <div class="app-container">
    <el-form :model="ruleForm" ref="ruleForm" label-width="120px">
      <el-row :gutter="20">
        <!-- 公司及联系人信息 -->
        <el-divider content-position="left">
          <legend class="divider-line">公司及联系人信息</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="公司名称" prop="company">
            <div class="yxkj-word-black">{{ ruleForm.company }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公司所在地" prop="companyCity">
            <div class="yxkj-word-black">{{ region1 }} {{ region2 }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册地址" prop="companyAdd">
            <div class="yxkj-word-black">{{ ruleForm.companyAdd }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公司电话" prop="telephone">
            <div class="yxkj-word-black">{{ ruleForm.telephone }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="传真">
            <div class="yxkj-word-black">{{ ruleForm.fax }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="email">
            <div class="yxkj-word-black">{{ ruleForm.email }}</div>
          </el-form-item>
        </el-col>

        <!-- 营业执照信息 -->
        <el-divider content-position="left">
          <legend class="divider-line">营业执照信息</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="营业执照号" prop="bussinessLicense">
            <div class="yxkj-word-black">{{ ruleForm.bussinessLicense }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="组织机构号" prop="organization">
            <div class="yxkj-word-black">{{ ruleForm.organization }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="日期范围" prop="date">
            <div class="yxkj-word-black">
              {{ ruleForm.companyStartTime }} - {{ ruleForm.companyEndTime }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="营业执照" prop="bussinessLicenseImage">
            <div class="yxkj-word-black">
              <img
                class="layui-upload-img"
                :src="$imagePath + ruleForm.bussinessLicenseImage"
                alt="" />
            </div>
          </el-form-item>
        </el-col>

        <!-- 法人信息 -->
        <el-divider content-position="left">
          <legend class="divider-line">法人信息</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="法人" prop="legalPerson">
            <div class="yxkj-word-black">{{ ruleForm.legalPerson }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人电话" prop="personPhone">
            <div class="yxkj-word-black">{{ ruleForm.personPhone }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人身份证" prop="legalPersonCard">
            <div class="yxkj-word-black">{{ ruleForm.legalPersonCard }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证开始日期" prop="cardStart">
            <div class="yxkj-word-black">{{ ruleForm.cardStart }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证结束日期" prop="cardEnd">
            <div class="yxkj-word-black">{{ ruleForm.cardEnd }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证地址" prop="cardAddress">
            <div class="yxkj-word-black">{{ ruleForm.cardAddress }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="身份证正面" prop="personCardUp">
            <div class="yxkj-word-black">
              <img
                class="layui-upload-img"
                :src="$imagePath + ruleForm.personCardUp"
                alt="" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="身份证反面" prop="personCardDown">
            <div class="yxkj-word-black">
              <img
                class="layui-upload-img"
                :src="$imagePath + ruleForm.personCardDown"
                alt="" />
            </div>
          </el-form-item>
        </el-col>

        <!-- 银行开户信息(此账号为结算账号) -->
        <el-divider content-position="left">
          <legend class="divider-line">银行开户信息(此账号为结算账号)</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="账户名称" prop="bankUser">
            <div class="yxkj-word-black">{{ ruleForm.bankUser }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行" prop="bankName">
            <div class="yxkj-word-black">{{ ruleForm.bankName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支行名称" prop="bankNameBranch">
            <div class="yxkj-word-black">{{ ruleForm.bankNameBranch }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支行联行号" prop="brandNameCode">
            <div class="yxkj-word-black">{{ ruleForm.brandNameCode }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行省市编码" prop="bankAddressCode">
            <div class="yxkj-word-black">{{ ruleForm.bankAddressCode }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行账号" prop="bankCode">
            <div class="yxkj-word-black">{{ ruleForm.bankCode }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户所在地" prop="companyCity">
            <div class="yxkj-word-black">{{ account1 }} {{ account2 }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付宝账号" prop="aliAccount">
            <div class="yxkj-word-black">{{ ruleForm.aliAccount }}</div>
          </el-form-item>
        </el-col>

        <!-- 店铺信息 -->
        <el-divider content-position="left">
          <legend class="divider-line">店铺信息</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="商家账号" prop="userName">
            <div class="yxkj-word-black">{{ ruleForm.userName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺账号" prop="sellerName">
            <div class="yxkj-word-black">{{ ruleForm.sellerName }}</div>
          </el-form-item>
        </el-col>

        <div class="fixed-bottom-20">
          <el-button type="success" @click="back">返回</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { editApplySeller } from "@/api/seller";
export default {
  name: "showsellerDetail",
  data() {
    return {
      applyId: "",
      // 选择公司所在地
      region1: "", // 默认选中一级分类
      region2: "", // 默认选中二级分类
      // 选择开户行所在地
      account1: "", // 默认选中一级分类
      account2: "", // 默认选中二级分类
      ruleForm: {
        company: "",
        companyProvince: "",
        companyCity: "",
        companyAdd: "",
        telephone: "",
        fax: "",
        email: "",
        yxkjdate: [],
        bussinessLicense: "",
        organization: "",
        bussinessLicenseImage: "",
        legalPerson: "",
        personPhone: "",
        legalPersonCard: "",
        personCardUp: "",
        personCardDown: "",
        bankUser: "",
        bankName: "",
        bankNameBranch: "",
        brandNameCode: "",
        bankCode: "",
        bankProvince: "",
        bankCity: "",
        userName: "",
        sellerName: "",
        cardStart: "",
        cardEnd: "",
        cardAddress: "",
        aliAccount: "",
        bankAddressCode: "",
      },
    };
  },
  created() {
    this.applyId = this.$route.query.id;
    editApplySeller({ sellerApplyId: this.applyId }).then((res) => {
      console.log(res.data.data.sellerApply);
      this.ruleForm = res.data.data.sellerApply;
      this.$set(this.ruleForm, "userName", res.data.data.userName);
      this.$set(this.ruleForm, "sellerName", res.data.data.sellerName);

      this.region1 = res.data.data.provinceList.filter((value) => {
        return res.data.data.sellerApply.companyProvince == value.id;
      })[0].regionName;
      this.region2 = res.data.data.companyCityList.filter((value) => {
        return res.data.data.sellerApply.companyCity == value.id;
      })[0].regionName;
      this.account1 = res.data.data.provinceList.filter((value) => {
        return res.data.data.sellerApply.bankProvince == value.id;
      })[0].regionName;
      this.account2 = res.data.data.bankCityList.filter((value) => {
        return res.data.data.sellerApply.bankCity == value.id;
      })[0].regionName;
    });
  },
  methods: {
    back() {
      history.back();
    },
  },
};
</script>
<style scoped>
::v-deep [class*="el-row"] {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.el-select {
  margin-right: 10px;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep [class*="el-col-"] {
  float: none;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  height: 150px;
  display: block;
}
.layui-upload-img {
  min-height: 100px;
  max-height: 200px;
  margin: 0 10px 10px 0;
}
</style>
